<template>
  <div class="index-container">
    <div class="welcome-label">客服{{nickName}}，欢迎回来！</div>
    <div class="top-container">
      <div class="top-container-group">
        <div class="top-item-text">总会话量</div>
        <div style="color:#187cff" class="top-item-num">230</div>
        <div class="top-item-label">较昨日上涨10%</div>
      </div>
      <div class="top-container-group">
        <div class="top-item-text">处理中的会话数目</div>
        <div style="color:#ff6262" class="top-item-num">200</div>
        <div class="top-item-label">较昨日上涨10%</div>
      </div>
      <div class="top-container-group">
        <div class="top-item-text">在线客服数</div>
        <div style="color:#2ed477" class="top-item-num">30</div>
        <div class="top-item-label">较昨日上涨10%</div>
      </div>
      <div class="top-container-group">
        <div class="top-item-text">今日消息数</div>
        <div style="color:#ff9138" class="top-item-num">2300</div>
        <div class="top-item-label">较昨日上涨10%</div>
      </div>
    </div>
    <div class="middle-container">
      <div class="middle-left-container">
        <!-- <div class="title-style">访问量统计</div> -->
        <div class="echarts-container">
          <div ref="visitorEcharts" style="height: 320px;width: 900px;"></div>
        </div>
      </div>
      <div class="middle-right-container">
        <div class="title-style">快捷入口</div>
        <div class="quick-btn-group">
          <el-row>
            <el-col :span="6">
              <div>
                <router-link to="/session">
                  <div class="quick-btn-item">
                    <div style="background-color: #006eff;" class="quick-btn-icon">
                      <i class="quick-btn-icon-style iconfont">&#xe7b3;</i>
                    </div>
                    <div class="quick-btn-text">当前会话</div>
                  </div>
                </router-link>
                <router-link to="order">
                  <div class="quick-btn-item">
                    <div style="background-color: #006eff;" class="quick-btn-icon">
                      <i class="quick-btn-icon-style iconfont">&#xe7c4;</i>
                    </div>
                    <div class="quick-btn-text">工单中心</div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <router-link to="/visitor">
                  <div class="quick-btn-item">
                    <div style="background-color: #ff6262;" class="quick-btn-icon">
                      <i class="quick-btn-icon-style iconfont">&#xe74b;</i>
                    </div>
                    <div class="quick-btn-text">访客管理</div>
                  </div>
                </router-link>
                <router-link to="/statistic">
                  <div class="quick-btn-item">
                    <div style="background-color: #ff6262;" class="quick-btn-icon">
                      <i class="quick-btn-icon-style iconfont">&#xe7b5;</i>
                    </div>
                    <div class="quick-btn-text">数据报表</div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <router-link to="/history">
                  <div class="quick-btn-item">
                    <div style="background-color: #2ed477;" class="quick-btn-icon">
                      <i class="quick-btn-icon-style iconfont">&#xe7c2;</i>
                    </div>
                    <div class="quick-btn-text">会议记录</div>
                  </div>
                </router-link>
                <!-- <router-link> -->
                <div class="quick-btn-item">
                  <div style="background-color: #e4e4e4;" class="quick-btn-icon">
                    <i class="quick-btn-icon-style iconfont">&#xe7b0;</i>
                  </div>
                  <div class="quick-btn-text">编辑入口</div>
                </div>
                <!-- </router-link> -->
              </div>
            </el-col>
            <el-col :span="6">
              <router-link to="/customer">
                <div class="quick-btn-item">
                  <div style="background-color: #ff9138;" class="quick-btn-icon">
                    <i class="quick-btn-icon-style iconfont">&#xe7b2;</i>
                  </div>
                  <div class="quick-btn-text">客户管理</div>
                </div>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="bottom-container">
      <div style="padding-bottom:0" class="title-style">
        客服监控
        <el-button
          @click="handleTableDataRefresh"
          :loading="isLoading"
          style="float: right"
          type="primary"
          icon="el-icon-refresh"
          circle
        ></el-button>
      </div>
      <div class="bottom-table-group">
        <el-table
          :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
          :data="tableData"
          style="width: 100%"
          v-loading="isLoading"
        >
          <el-table-column prop="nickName" label="客服昵称" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.state=='在线'" style="color:#2ed477">{{scope.row.state}}</span>
              <span v-else style="color: #ff6262">{{scope.row.state}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalOnlineTime" label="在线时长" align="center"></el-table-column>
          <el-table-column prop="sessionCount" label="会话数" align="center"></el-table-column>
          <el-table-column prop="msgCount" label="消息数" align="center"></el-table-column>
          <el-table-column prop="sessionCount" label="平均响应时长" align="center"></el-table-column>
          <el-table-column prop="msgCount" label="平均会话时长" align="center"></el-table-column>
        </el-table>
        <div class="bottom-pagination-group">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, prev, pager, next,sizes, jumper"
            :total="totalData"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "Index",
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      isLoading: false
    };
  },
  watch: {},
  computed: {
    nickName() {
      return this.$store.state.profile.nickName;
    }
  },
  methods: {
    drawEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let myChart = this.$echarts.init(this.$refs.visitorEcharts);
      myChart.setOption({
        color: ["#3bd77f", "#ff7474", "#ff9945"],
        title: {
          text: "访问量统计"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "总访问量",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230
            ]
          },
          {
            name: "总会话量",
            type: "line",
            stack: "总量",
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330
            ]
          },
          {
            name: "有效会话量",
            type: "line",
            stack: "总量",
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330
            ]
          }
        ],
        dataZoom: [
          {
            type: "slider", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            bottom: "0"
          }
        ]
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getPageData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getPageData();
    },
    handleTableDataRefresh() {
      this.getPageData();
    },
    getPageData() {
      this.isLoading = true;
      api
        .getAllCustomerServiceAPI({
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          this.isLoading = false;
          let { error, data } = res.data;
          if (error) {
            this.$message.error("请求接口异常");
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        });
    }
  },
  created() {
    this.getPageData();
  },
  mounted() {
    this.drawEcharts();
  }
};
</script>

<style scoped>
.index-container {
  width: 95vw;
}
.welcome-label {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  margin: 20px;
}
.top-container {
  height: 22vh;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  padding: 20px 10px;
  margin: 10px 20px;
}
.top-container-group {
  flex: 1;
  background-color: #f0f5fc;
  border-radius: 5px;
  margin: 0 10px;
  text-align: center;
  padding: 12px;
}
.top-item-text {
  color: #202020;
}
.top-item-num {
  font-size: 50px;
  font-weight: bold;
  padding: 15px;
}
.top-item-label {
  color: #858383;
  font-size: 12px;
}
.middle-container {
  height: 50vh;
  border-radius: 5px;
  display: flex;
  margin: 10px 20px;
}
.middle-left-container {
  flex: 2;
  background-color: #fff;
  margin-right: 5px;
  border-radius: 5px;
}
.middle-right-container {
  flex: 1;
  background-color: #fff;
  margin-left: 5px;
  border-radius: 5px;
}
.bottom-container {
  height: auto;
  width: 92.5vw;
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 20px 20px;
  display: inline-block;
}
.title-style {
  padding: 20px;
  font-size: 20px;
}
.quick-btn-group {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.quick-btn-item {
  padding: 20px 25px;
}
.quick-btn-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #006eff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quick-btn-icon-style {
  color: #fff;
  font-size: 25px;
}
.quick-btn-text {
  padding-top: 10px;
  font-size: 15px;
}
.bottom-table-group {
  padding: 20px;
}
a {
  text-decoration: none;
  color: #000;
}
.router-link-active {
  text-decoration: none;
}
.echarts-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bottom-pagination-group {
  padding: 20px;
  float: right;
}
</style>
